import {messages} from "share/common";
import React from 'react'
import 'styles/setting/work-calendar/custom-calendar.scss';

class CustomCalendar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      data: {},
      allMonth: {},
      allMonthArray: [],
      testArray: [],
      isEditing: false,
      changeData: {},
      month: [
        messages('basic-11.key160')/*1月*/,
        messages('basic-11.key161')/*2月*/,
        messages('basic-11.key162')/*3月*/,
        messages('basic-11.key163')/*4月*/,
        messages('basic-11.key164')/*5月*/,
        messages('basic-11.key165')/*6月*/,
        messages('basic-11.key166')/*7月*/,
        messages('basic-11.key167')/*8月*/,
        messages('basic-11.key168')/*9月*/,
        messages('basic-11.key169')/*10月*/,
        messages('basic-11.key170')/*11月*/,
        messages('basic-11.key171')/*12月*/,
      ]
    };
  }

  componentWillMount(){
    const { onRef } = this.props;
    onRef && onRef(this);
  }

  //开始编辑
  startEdit = () => {
    this.setState({
      isEditing: true
    })
  };

  //处理数据 进行渲染
  startRender = (data) => {
    let allMonth = {
      month1: [],
      month2: [],
      month3: [],
      month4: [],
      month5: [],
      month6: [],
      month7: [],
      month8: [],
      month9: [],
      month10: [],
      month11: [],
      month12: []
    };
    let allMonthArray = [];
    data.workdays.map((item)=> {
      if(item.day < 10) {
        item.day = '0' + item.day
      }
      item.className = 'one-day';
      allMonth['month'+ item.month].push(item)
    });
    data.weekends.map((item)=> {
      if(item.day < 10) {
        item.day = '0' + item.day
      }
      item.className = 'no-work-day';
      allMonth['month'+ item.month].push(item)
    });
    data.holidays.map((item)=> {
      if(item.day < 10) {
        item.day = '0' + item.day
      }
      item.className = 'holiday';
      allMonth['month'+ item.month].push(item)
    });
    Object.keys(allMonth).forEach((key)=> {               //按日期排序
      allMonth[key].sort((a, b)=> { return a.day-b.day })
    });
    Object.keys(allMonth).forEach((key)=> {
      allMonthArray.push(allMonth[key])
    });
    let testArray = allMonthArray;
    testArray.map((item, index)=> {
      let nowWeek = new Date(testArray[index][0].workDate).getDay() ? new Date(testArray[index][0].workDate).getDay() : 7; // 获取每月1号星期
      for (let i = 0; i < nowWeek%7; i++) {                     //补充上月日期
        testArray[index].unshift({
          year: testArray[0][0].year,
          day: (!index ? 31 : this.getDaysInOneMonth(testArray[0][0].year, index)) - i,
          workDateType: 'none',
          className: 'add-day'})
      }
      let left = 42 - testArray[index].length;
      for (let i = 0; i < left; i++) {                          //补充下月日期
        testArray[index].push({day: i < 9 ? ('0' + (1 + i)) : (1 + i), workDateType: 'none', className: 'add-day'})
      }
    });
    this.setState({
      allMonth,
      allMonthArray,
      testArray,
      changeData: {calendarId: allMonthArray[0][20].calendarId,
                    updateWorkdayList: [],
                    updateWeekendsList: [],
                    updateHolidayList: []}
    });
  };

  //获取某年某月1号的星期
  getDaysInOneMonth = (year, month) => {
    month = parseInt(month, 10);
    let d= new Date(year, month, 0);
    return d.getDate();
  };

  //点击日期处理
  editOneDay = (record) => {
    const { isEditing, allMonthArray, changeData } = this.state;
    const target = JSON.parse(record.target.id).day;
    const index = JSON.parse(record.target.id).index;
    Array.prototype.remove = function(val) {
      let index = this.indexOf(val);
      if (index > -1) {
        this.splice(index, 1);
      }
    };
    function filterCalendar(date) {                        // 从三个list 过滤重复 日期
      changeData.updateWeekendsList.remove(date);
      changeData.updateHolidayList.remove(date);
      changeData.updateWorkdayList.remove(date);
    }
    if(isEditing) {
      if (target.workDateType !== 'none') {
        if (target.workDateType === 'W') {
          target.className = 'no-work-day';
          target.workDateType = 'N';
          allMonthArray[target.month - 1][index] = target;
          filterCalendar(target.workDate);
          changeData.updateWeekendsList.push(target.workDate);
          this.setState({allMonthArray, changeData})
        } else if (target.workDateType === 'N') {
          target.className = 'holiday';
          target.workDateType = 'H';
          allMonthArray[target.month - 1][index] = target;
          filterCalendar(target.workDate);
          changeData.updateHolidayList.push(target.workDate);
          this.setState({allMonthArray, changeData})
        } else if (target.workDateType === 'H') {
          target.className = 'one-day';
          target.workDateType = 'W';
          allMonthArray[target.month - 1][index] = target;
          filterCalendar(target.workDate);
          changeData.updateWorkdayList.push(target.workDate);
          this.setState({allMonthArray, changeData})
        }
        let length = changeData.updateWeekendsList.length
          + changeData.updateHolidayList.length
          + changeData.updateWorkdayList.length;
        if(length > 0) {
          this.props.disableConfirm(false);
        }
      } else {
        return;
      }
    } else {
      return;
    }

  };

  renderCalendar = () => {
    const { allMonthArray, isEditing, month } = this.state;
    return (
      <div className="calendar-box">
        {
          allMonthArray.map((item, index)=> {
            return (
              <div className="single-calendar">
                <div className="calendar-header">
                  {month[index]}
                </div>
                <div className="week-box">
                  <div className="week-title">{messages('basic-11.key172')/*日*/}</div>
                  <div className="week-title">{messages('basic-11.key173')/*一*/}</div>
                  <div className="week-title">{messages('basic-11.key174')/*二*/}</div>
                  <div className="week-title">{messages('basic-11.key175')/*三*/}</div>
                  <div className="week-title">{messages('basic-11.key176')/*四*/}</div>
                  <div className="week-title">{messages('basic-11.key177')/*五*/}</div>
                  <div className="week-title">{messages('basic-11.key178')/*六*/}</div>
                </div>
                <div className="days-box">
                  {
                    item.map((day, index)=> {
                      return (
                        <div onClick={this.editOneDay}
                             id={JSON.stringify({day, index: index})}
                             className={`${day.className} ${isEditing ? 'pointer hover' : ''}`}>
                          {day.day}
                        </div>
                      )
                    })
                  }
                </div>
              </div>
            )
          })
        }
      </div>
    )
  };

  render() {
    return (
      <div className="custom-calendar">
        {this.renderCalendar()}
      </div>
    )
  }

}

export default CustomCalendar
